<template>
	<!-- 顶部返回部分 -->
	<nav-bar
		style="height: 5.3125rem; padding-top: 0.9375rem"
		title="免费好课"
		left-text=""
		fixed="true"
		left-arrow
		@click-left="onClickLeft"
	>
	</nav-bar>
	<!-- 两大标签部分 -->
	<tabs
		v-model:active="active"
		swipeable
		class="tabs"
		color="var(--main-color)"
		line-width="1.5625rem"
		sticky="true"
		offset-top="4.0625rem"
		line-height="0.125rem"
		title-active-color="var(--main-color)"
		duration=".4"
	>
		<!-- 第一个标签内容 -->
		<tab :title="'视频 '" style="margin-top: 0.9375rem">
			<div class="cards">
				<card
					v-for="item in shangPin"
					:title="item.title"
					:thumb="dalImg(item.picture)"
				>
					<!-- 第一个标签内内容卡左侧 -->
					<template #tags>
						<tag plain type="danger" class="a">1339739次学习</tag>
					</template>
				</card>
			</div>
		</tab>
		<!-- 第二个标签内容 -->
		<tab :title="'课程 '">
			<div class="cards" style="margin-top: 0.9375rem">
				<card
					v-for="item in shangPin"
					:key="item.id"
					:title="item.title"
					desc="课时 4 习题 42"
					:thumb="dalImg(item.picture)"
				>
					<!-- 第二个标签内内容卡左侧 -->
					<template #tags>
						<tag plain type="danger" class="a">1339739次学习</tag>
					</template>
				</card>
			</div>
			<!--未调接口的模板
			<div class="cards">
				<card
					v-for="i in 10"
					title="阿萨的成绩"
					thumb="dalImg(item.coverImage)"
				>
					第一个标签内内容卡左侧
					<template #tags>
						<tag plain type="danger" class="a">1339739次学习</tag>
					</template>
				</card>
			</div> -->
		</tab>
	</tabs>
	<share-sheet
		v-model:show="showShare"
		title="立即分享给好友"
		:options="options"
	/>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Card, NavBar, Tab, Tabs, ShareSheet } from "vant";
import { dalImg } from "../Utils/tools";
// 引入接口
import { localprodectsAPI } from "../API/jiang";
import { get } from "../utils/request";
const shangPin = ref([]);
// get("/api/course/courseDetail?id=9").then((res)=>console.log(res.data));
localprodectsAPI().then((res) => {
	shangPin.value = res.data;
	console.log(shangPin.value);
});
const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};
const showShare = ref(false);
const options = [
	{ name: "微信", icon: "wechat" },
	{ name: "微博", icon: "weibo" },
	{ name: "复制链接", icon: "link" },
	{ name: "分享海报", icon: "poster" },
	{ name: "二维码", icon: "qrcode" },
];
</script>
<style scoped>
.tabs {
	position: absolute;
	top: 3.4375rem;
	width: 100%;
}
.cards {
	background-color: #f5f5f5ff;
	overflow: auto;
}
.cards .van-card:nth-child(1) {
	margin-top: 1.25rem;
}
.cards .van-card {
	border-radius: 0.625rem;
	width: 90%;
	background-color: #fff;
	margin: 0.625rem auto;
	box-shadow: 0rem 0.1875rem 0.4375rem 0rem rgb(0 0 0 / 35%);
}
.cards .van-card__title {
	font-size: 1.125rem;
	display: block;
	height: 3.125rem;
	line-height: 1.875rem;
	font-weight: unset;
}
.a {
	position: absolute;
	bottom: 0;
}
.b {
	position: absolute;
	display: block;
	color: var(--main-color);
	bottom: 0.4375rem;
	right: 2.1875rem;
}
</style>
